<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/jquery.min.js"></script>
		<script src="js/popper.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		
		<link rel="stylesheet" type="text/css" href="css/comm.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<title>学子商城首页</title>
	</head>
	<body>
		<iframe src="header.html" class="header"></iframe>
		
		<div class="container">
		<!-- 焦点轮播图 轮播图 -->
			<div id="demo" class="carousel slide" data-ride="carousel">
			 
			  <!-- 指示符 -->
			  <ul class="carousel-indicators">
			    <li data-target="#demo" data-slide-to="0" class="active"></li>
			    <li data-target="#demo" data-slide-to="1"></li>
			    <li data-target="#demo" data-slide-to="2"></li>
				<li data-target="#demo" data-slide-to="3"></li>
			  </ul>
			 
			  <!-- 轮播图片 -->
			  <div class="carousel-inner">
			    <div class="carousel-item active">
			      <a href="#"><img class="w-100" src="img/index/banner1.png"></a>
			    </div>
			    <div class="carousel-item">
			      <a href="#"><img class="w-100" src="img/index/banner2.png"></a>
			    </div>
			    <div class="carousel-item">
			      <a href="#"><img class="w-100" src="img/index/banner3.png"></a>
			    </div>
				<div class="carousel-item">
				  <a href="#"><img class="w-100" src="img/index/banner4.png"></a>
				</div>
			  </div>
			 
			  <!-- 左右切换按钮 -->
			  <a class="carousel-control-prev" href="#demo" data-slide="prev">
			    <span class="carousel-control-prev-icon"></span>
			  </a>
			  <a class="carousel-control-next" href="#demo" data-slide="next">
			    <span class="carousel-control-next-icon"></span>
			  </a>
			</div>
		<!-- 焦点轮播图结束 -->
		<!-- 1floor -->
			<div id="one-fllor">
				<div class="floor-header h4 mt-3 pb-1 font-weight-bold">
					<img src="img/index/computer_icon.png" >
					<span class="ml-2">首页推荐 /1F</span>
				</div>
				<div class="row no-gutters con">
					<div class="col-sm-12 col-lg-7 top d-flex align-items-stretch">
						<div class="index">
							<div class="floor-img">
								<a href="#"><img class="good-img w-100" src="img/index/study_computer_img1.png" ></a>
							</div>
							<div class="good-text">
								<p class="h2">Apple MacBook Air系列</p>
								<p>酷睿双核i5处理器|256GB SSD|8GB内存|英特尔HD显卡620含共享显卡内存</p>
								<p class="h3 price">￥6988.00</p>
								<a class="btn btn-info" href="#">查看详情</a>
							</div>
							
						</div>
					</div>
					<div class="col-sm-12 col-lg-5 top d-flex align-items-stretch">
						<div class="index">
							<div class="floor-img">
								<a href="#"><img class="good-img w-100" src="img/index/study_computer_img2.png" ></a>
							</div>
							<div class="good-text">
								<p class="h2">小米Air 金属超轻薄</p>
								<p>酷睿双核i5处理器|512GB SSD|2GB内存|英特尔HD独立显卡</p>
								<p class="h3 price">￥3488.00</p>
								<a class="btn btn-info" href="#">查看详情</a>
							</div>
							
						</div>
					</div>
					<div class="col-sm-12 col-lg-5 bottom d-flex align-items-stretch">
						<div class="index">
							<div class="floor-img2">
								<a href="#"><img class="good-img2 w-100" src="img/index/study_computer_img3.png" ></a>
							</div>
							<div class="good-text2">
								<p class="h5">联想E480C 轻薄系列</p>
								<p class="h3 price">￥5399.00</p>
								<a class="btn btn-info mt-3" href="#">查看详情</a>
							</div>
						</div>
					</div>
					<div class="col-sm-12 col-lg-7 bottom d-flex align-items-stretch">
						<div class="row no-gutters w-100">
							<div class="col-4 d-flex align-items-stretch">
								<div class="index text-center">
									<a href="#"><img class="good-img2 w-100" src="img/index/study_computer_img4.png" ></a>
									<p class="m-0">华硕RX310 金属超极本</p>
									<p class="h4 price">￥4966.00</p>
									<a class="btn btn-danger" href="#">查看详情</a>
								</div>
							</div>
							<div class="col-4 d-flex align-items-stretch">
								<div class="index text-center">
									<a href="#"><img class="good-img2 w-100" src="img/index/study_computer_img5.png" ></a>
									<p class="m-0">联想小新700 电竞版游戏本</p>
									<p class="h4 price">￥6299.00</p>
									<a class="btn btn-danger" href="#">查看详情</a>
								</div>
							</div>
							<div class="col-4 d-flex align-items-stretch">
								<div class="index text-center">
									<a href="#"><img class="good-img2 w-100" src="img/index/study_computer_img5.png" ></a>
									<p class="m-0">戴尔灵越燃7000 轻薄窄边</p>
									<p class="h4 price">￥5199.00</p>
									<a class="btn btn-danger" href="#">查看详情</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		<!-- 1floor结束 -->
		<!-- 2floor -->
			<div id="one-fllor">
				<div class="floor-header h4 mt-3 pb-1 font-weight-bold">
					<img src="img/index/computer_icon.png" >
					<span class="ml-2">首页推荐 /2F</span>
				</div>
				<div class="row no-gutters con">
					<div class="col-sm-12 col-lg-7 top d-flex align-items-stretch">
						<div class="index">
							<div class="floor-img">
								<a href="#"><img class="good-img w-100" src="img/index/study_computer_img1.png" ></a>
							</div>
							<div class="good-text">
								<p class="h2">Apple MacBook Air系列</p>
								<p>酷睿双核i5处理器|256GB SSD|8GB内存|英特尔HD显卡620含共享显卡内存</p>
								<p class="h3 price">￥6988.00</p>
								<a class="btn btn-info" href="#">查看详情</a>
							</div>
							
						</div>
					</div>
					<div class="col-sm-12 col-lg-5 top d-flex align-items-stretch">
						<div class="index">
							<div class="floor-img">
								<a href="#"><img class="good-img w-100" src="img/index/study_computer_img2.png" ></a>
							</div>
							<div class="good-text">
								<p class="h2">小米Air 金属超轻薄</p>
								<p>酷睿双核i5处理器|512GB SSD|2GB内存|英特尔HD独立显卡</p>
								<p class="h3 price">￥3488.00</p>
								<a class="btn btn-info" href="#">查看详情</a>
							</div>
							
						</div>
					</div>
					<div class="col-sm-12 col-lg-5 bottom d-flex align-items-stretch">
						<div class="index">
							<div class="floor-img2">
								<a href="#"><img class="good-img2 w-100" src="img/index/study_computer_img3.png" ></a>
							</div>
							<div class="good-text2">
								<p class="h5">联想E480C 轻薄系列</p>
								<p class="h3 price">￥5399.00</p>
								<a class="btn btn-info mt-3" href="#">查看详情</a>
							</div>
						</div>
					</div>
					<div class="col-sm-12 col-lg-7 bottom d-flex align-items-stretch">
						<div class="row no-gutters w-100">
							<div class="col-4 d-flex align-items-stretch">
								<div class="index text-center">
									<a href="#"><img class="good-img2 w-100" src="img/index/study_computer_img4.png" ></a>
									<p class="m-0">华硕RX310 金属超极本</p>
									<p class="h4 price">￥4966.00</p>
									<a class="btn btn-danger" href="#">查看详情</a>
								</div>
							</div>
							<div class="col-4 d-flex align-items-stretch">
								<div class="index text-center">
									<a href="#"><img class="good-img2 w-100" src="img/index/study_computer_img5.png" ></a>
									<p class="m-0">联想小新700 电竞版游戏本</p>
									<p class="h4 price">￥6299.00</p>
									<a class="btn btn-danger" href="#">查看详情</a>
								</div>
							</div>
							<div class="col-4 d-flex align-items-stretch">
								<div class="index text-center">
									<a href="#"><img class="good-img2 w-100" src="img/index/study_computer_img5.png" ></a>
									<p class="m-0">戴尔灵越燃7000 轻薄窄边</p>
									<p class="h4 price">￥5199.00</p>
									<a class="btn btn-danger" href="#">查看详情</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		<!-- 2floor结束 -->
		<!-- 3floor -->
			<div id="one-fllor">
				<div class="floor-header h4 mt-3 pb-1 font-weight-bold">
					<img src="img/index/computer_icon.png" >
					<span class="ml-2">首页推荐 /3F</span>
				</div>
				<div class="row no-gutters con">
					<div class="col-sm-12 col-lg-7 top d-flex align-items-stretch">
						<div class="index">
							<div class="floor-img">
								<a href="#"><img class="good-img w-100" src="img/index/study_computer_img1.png" ></a>
							</div>
							<div class="good-text">
								<p class="h2">Apple MacBook Air系列</p>
								<p>酷睿双核i5处理器|256GB SSD|8GB内存|英特尔HD显卡620含共享显卡内存</p>
								<p class="h3 price">￥6988.00</p>
								<a class="btn btn-info" href="#">查看详情</a>
							</div>
							
						</div>
					</div>
					<div class="col-sm-12 col-lg-5 top d-flex align-items-stretch">
						<div class="index">
							<div class="floor-img">
								<a href="#"><img class="good-img w-100" src="img/index/study_computer_img2.png" ></a>
							</div>
							<div class="good-text">
								<p class="h2">小米Air 金属超轻薄</p>
								<p>酷睿双核i5处理器|512GB SSD|2GB内存|英特尔HD独立显卡</p>
								<p class="h3 price">￥3488.00</p>
								<a class="btn btn-info" href="#">查看详情</a>
							</div>
							
						</div>
					</div>
					<div class="col-sm-12 col-lg-5 bottom d-flex align-items-stretch">
						<div class="index">
							<div class="floor-img2">
								<a href="#"><img class="good-img2 w-100" src="img/index/study_computer_img3.png" ></a>
							</div>
							<div class="good-text2">
								<p class="h5">联想E480C 轻薄系列</p>
								<p class="h3 price">￥5399.00</p>
								<a class="btn btn-info mt-3" href="#">查看详情</a>
							</div>
						</div>
					</div>
					<div class="col-sm-12 col-lg-7 bottom d-flex align-items-stretch">
						<div class="row no-gutters w-100">
							<div class="col-4 d-flex align-items-stretch">
								<div class="index text-center">
									<a href="#"><img class="good-img2 w-100" src="img/index/study_computer_img4.png" ></a>
									<p class="m-0">华硕RX310 金属超极本</p>
									<p class="h4 price">￥4966.00</p>
									<a class="btn btn-danger" href="#">查看详情</a>
								</div>
							</div>
							<div class="col-4 d-flex align-items-stretch">
								<div class="index text-center">
									<a href="#"><img class="good-img2 w-100" src="img/index/study_computer_img5.png" ></a>
									<p class="m-0">联想小新700 电竞版游戏本</p>
									<p class="h4 price">￥6299.00</p>
									<a class="btn btn-danger" href="#">查看详情</a>
								</div>
							</div>
							<div class="col-4 d-flex align-items-stretch">
								<div class="index text-center">
									<a href="#"><img class="good-img2 w-100" src="img/index/study_computer_img5.png" ></a>
									<p class="m-0">戴尔灵越燃7000 轻薄窄边</p>
									<p class="h4 price">￥5199.00</p>
									<a class="btn btn-danger" href="#">查看详情</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		<!-- 3floor结束 -->
		</div>
		<iframe src="footer.html" class="footer"></iframe>
	</body>
</html>
